<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useLevelStore } from '@/stores/TeacherLevel';
import { api } from '@/api/api';
import { message } from 'ant-design-vue';
import { useResourceStore } from '@/stores/TeacherResource';
import { sortBy } from 'lodash';

export default defineComponent({
  name: 'BiliBiliLinkModal',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    onClose: {
      type: Function,
      required: true,
    },
    courseFileId: {
      type: String,
      required: true,
    },
    courseId: {
      type: String,
      required: true,
    },
    sortId: {
      type: [Number, String],
      required: true,
    },
    fetchCourseData: {
      type: Function,
      required: true,
    },
  },
  setup(props) {
    const link = ref<string>('');
    const name = ref<string>('');

    const handleReset = () => {
      link.value = '';
      name.value = '';
    };

    const handOk = async () => {
      props.onClose();
      try {
        const response = await api.post('/java/teacher/handlefileSource/uploadWebSource', {
          courseFileId: props.courseFileId,
          courseId: props.courseId,
          web: link.value,
          webName: name.value,
          sortOrder: props.sortId || 0,

        });
        message.success(response.data.msg || '网页文件上传成功');
        await props.fetchCourseData(props.courseFileId, true, '');
      }
      catch (error) {
        message.error('网页文件上传失败，请重试');
      }
      finally {
        handleReset();
      }
    };

    return {
      link,
      name,
      handleReset,
      handOk,
    };
  },
});
</script>

<template>
  <a-modal
    title="外部网址"
    :open="visible"
    ok-text="确定"
    cancel-text="取消"
    @cancel="onClose"
    @ok="handOk"
  >
    <a-input
      v-model:value="name"
      placeholder="请输入名字"
      style="margin-bottom: 16px"
    />
    <a-textarea
      v-model:value="link"
      placeholder="请输入B站链接"
      style="height: 200px"
    />
    <p style="margin-top: 8px; color: #888">
      一次支持添加1个网址
    </p>
  </a-modal>
</template>

<style lang="scss" scoped>
/* 这里可以添加任何自定义的样式 */
</style>
